<template>
  <div class="docker">
    <div
      v-for="(item, index) in dockerlist"
      :key="index"
      :class="{ docker__item_active: index === currentIndex }"
      class="docker__item"
      @click="handleDockerClick(index)"
    >
      <!-- item.icon 是特殊字符，不能使用模板语法解析，这里使用 v-html  -->
      <div class="iconfont" v-html="item.icon" />
      <div class="docker__title">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'Docker',

  setup() {
    const router = useRouter()
    const dockerlist = [
      { icon: '&#xe602;', text: '首页' },
      { icon: '&#xe600;', text: '定位' },
      { icon: '&#xe601;', text: '功能' },
      { icon: '&#xe604;', text: '我的' }
    ]
    const currentIndex = ref(0)
    function handleDockerClick(index) {
      currentIndex.value = index
      if (index === 0) {
        router.push({ name: 'Home' })
      } else if (index === 1) {
        router.push({ name: 'Orientation' })
      }
    }
    return {
      dockerlist,
      currentIndex,
      handleDockerClick
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';

.docker {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  //   padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 0.01rem solid $background-color;
  color: $font-color;
  &__item {
    flex: 1;
    text-align: center;
    .iconfont {
      margin: 0.07rem 0 0.02rem 0;
      font-size: 0.18rem;
    }
    &_active {
      color: $blue;
    }
  }

  &__title {
    font-size: 0.2rem;
    // 浏览器默认展示的最小像素是12像素，要显示10像素，横向和纵向都缩50%
    transform: scale(0.5, 0.5);
    // 要设置缩放的中心点，这里是以中间和顶部为中心才是合理的位置
    transform-origin: center top;
  }
}
</style>
